﻿@page "/chart/trackball"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the trackball behavior in the chart. To view the trackball and its tooltip, hover on the chart point. Meantime, in the touch device, touch and hold to view the trackball.</p>
</SampleDescription>
<ActionDescription>
    <p>The trackball is used to track a data point closer to the current mouse position or touch contact point. The trackball can be enabled by setting the <code>Enable</code> property of the crosshair to <code>true</code> and the <code>Shared</code> property of the tooltip to <code>true</code> in the chart.</p>
    <p>More information about the trackball can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/cross-hair-and-track-ball/#trackball'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Average Sales per Person" Theme="@Theme">
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}M" Title="Revenue (in Million)" Minimum="10" Maximum="80" RangePadding="ChartRangePadding.None" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></ChartCrosshairSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="John" XName="Period" Width="2" Opacity="1" YName="JohnRevenue" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Width="10" Height="10"></ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Andrew" XName="Period" Width="2" Opacity="1" YName="AndrewRevenue" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Width="10" Height="10"></ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Thomas" XName="Period" Width="2" Opacity="1" YName="ThamosRevenue" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Width="10" Height="10"></ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<TrackballChartData> ChartPoints { get; set; } = new List<TrackballChartData>
    {
        new TrackballChartData { Period = new DateTime(2000, 2, 11), JohnRevenue = 14, AndrewRevenue = 39, ThamosRevenue = 60 },
        new TrackballChartData { Period = new DateTime(2000, 9, 4), JohnRevenue = 20, AndrewRevenue = 30, ThamosRevenue = 55 },
        new TrackballChartData { Period = new DateTime(2001, 2, 11), JohnRevenue = 25, AndrewRevenue = 28, ThamosRevenue = 48 },
        new TrackballChartData { Period = new DateTime(2001, 9, 16), JohnRevenue = 21, AndrewRevenue = 35, ThamosRevenue = 57 },
        new TrackballChartData { Period = new DateTime(2002, 2, 7), JohnRevenue = 13, AndrewRevenue = 39, ThamosRevenue = 62 },
        new TrackballChartData { Period = new DateTime(2002, 9, 7), JohnRevenue = 18, AndrewRevenue = 41, ThamosRevenue = 64 },
        new TrackballChartData { Period = new DateTime(2003, 2, 11), JohnRevenue = 24, AndrewRevenue = 45, ThamosRevenue = 57 },
        new TrackballChartData { Period = new DateTime(2003, 9, 14), JohnRevenue = 23, AndrewRevenue = 48, ThamosRevenue = 53 },
        new TrackballChartData { Period = new DateTime(2004, 2, 6), JohnRevenue = 19, AndrewRevenue = 54, ThamosRevenue = 63 },
        new TrackballChartData { Period = new DateTime(2004, 9, 6), JohnRevenue = 31, AndrewRevenue = 55, ThamosRevenue = 50 },
        new TrackballChartData { Period = new DateTime(2005, 2, 11), JohnRevenue = 39, AndrewRevenue = 57, ThamosRevenue = 66 },
        new TrackballChartData { Period = new DateTime(2005, 9, 11), JohnRevenue = 50, AndrewRevenue = 60, ThamosRevenue = 65 },
        new TrackballChartData { Period = new DateTime(2006, 2, 11), JohnRevenue = 24, AndrewRevenue = 60, ThamosRevenue = 79 },
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class TrackballChartData
    {
        public DateTime Period { get; set; }
        public double JohnRevenue { get; set; }
        public double AndrewRevenue { get; set; }
        public double ThamosRevenue { get; set; }
    }
}
